<template>
  <div class="echarts h-full">
    <ECharts
      v-if="option"
      :option="option"
      :id="`Line` + props.id"
      ref="lineEChartsRef"
    />
  </div>
</template>

<script lang="ts" setup>
const props = defineProps({
  panelSetIcon: {
    type: Boolean,
    default: () => {
      return false;
    },
  },
  id: {
    type: String,
    default: () => {
      return "";
    },
  },
  url: {
    type: String,
    default: () => {
      return "";
    },
  },
  title: {
    type: String,
    default: () => {
      return "";
    },
  },
  // 图表是否缩小
  isMin: {
    type: Boolean,
    default: false,
  },
  // 整体曲线描述
  params: {
    type: Object,
    default: () => {
      return {};
    },
  },
  // 曲线x轴/y轴数据
  seriesData: {
    type: Object,
    default: () => {
      return {};
    },
  },
});
const { params, seriesData, isMin } = toRefs(props);
const option = ref();
const lineEChartsRef = ref();

// 获取警戒线
function getParamAlarmLines() {
  let linesData: any = [];
  const lines = params.value.paramAlarmLines;
  lines?.map((e) => {
    const obj = {
      name: "",
      yAxis: `${e?.alarmLineValue}`,
      lineStyle: {
        color: e?.alarmLevel >= 3 ? "red" : "orange",
        type: "dashed",
        width: 1,
      },
      label: {
        show: false,
        position: "end",
        formatter: ``,
      },
      emphasis: {
        label: {
          show: true,
          lineHeight: 70,
          fontSize: 14,
          position: "end",
          distance: 20,
          padding: 10,
          formatter: `${e?.alarmLineText}：${e?.alarmLineValue}`,
          color: e?.alarmLevel >= 3 ? "red" : "orange",
        },
      },
    };
    linesData.push(obj);
  });

  return linesData;
}

// 初始化仪表盘
watch(
  () => params.value,
  (newVal) => {
    setOptions(null, null);
  },
  {
    deep: true,
    immediate: true,
  }
);

// 折线图数据变更
watch(
  () => seriesData.value,
  (newVal) => {
    if (lineEChartsRef.value.chartInstance) {
      const echartOptions = lineEChartsRef.value.chartInstance.getOption();
      setOptions(
        echartOptions.dataZoom[0].start,
        echartOptions.dataZoom[0].end
      );
    }
  },
  {
    deep: true,
  }
);

function computedRight() {
  if (isMin.value) {
    if (params.value?.upperLimitValue || params.value?.lowerLimitValue) {
      return "35";
    } else {
      return "15";
    }
  } else {
    return "50";
  }
}

function setOptions(datazoomStart: any, datazoomEnd: any) {
  option.value = {
    animation: false,
    // color: [" rgb(69,108,244)"],
    title: {
      text: params.value.measurementUnit
        ? `${params.value?.parameterDesc} (${params.value?.measurementUnit})`
        : params.value?.parameterDesc,
      left: "15",
      top: isMin.value ? "8" : "25",
      textStyle: {
        fontSize: 14,
      },
    },
    tooltip: {
      trigger: "axis",
    },
    grid: {
      left: isMin.value ? "25" : "40",
      top: isMin.value ? "40" : "80",
      right: computedRight(),
      height: "auto",
      minHeight: 400, // 单位为像素
      bottom: isMin.value ? "15%" : "17%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      data: seriesData.value.collectionTimes || [],
      axisLabel: {
        interval: "auto", // 坐标刻度之间的显示间隔，默认就可以了
        rotate: 38, // 调整数值改变倾斜的幅度（范围-90到90）
        fontSize: 12,
        fontFamily: "DINLight",
      },
      axisTick: {
        alignWithLabel: true, // true：标签位于刻度线正下方；false：标签位于2个刻度线中间
      },
    },
    yAxis: {
      type: "value", // 坐标轴类型:数值轴
      // name: "湿度", // 坐标轴名称
      boundaryGap: false,
      // scale: true,
      position: "left", // 坐标轴位置:左侧
      // axisLabel: {
      //   interval: "auto", // 坐标刻度之间的显示间隔，默认就可以了
      //   // 调整数值改变倾斜的幅度（范围-90到90）
      // },
      // interval: "auto", // 坐标轴刻度间隔(当前被注释掉)
      offset: 0, // 坐标轴相对于默认位置的偏移:无偏移
      axisLine: {
        show: true, // 是否显示坐标轴线
        lineStyle: {
          color: "#6e7079", // 坐标轴线颜色:使用颜色数组的第一个颜色
        },
      },
      axisLabel: {
        fontSize: 12,
        fontFamily: "DINLight",
        // 自定义标签显示：当布尔类型图表，则显示 true or false
        formatter: function (value: number) {
          if (params.value.parameterType === "bool") {
            if (value === 0) {
              return "false";
            } else if (value === 1) {
              return "true";
            } else {
              return "";
            }
          } else {
            return value;
          }
        },
      },
      axisTick: {
        show: false,
      },
      splitLine: {
        show: true, // 是否显示分隔线
        lineStyle: {
          // color: "red",      // 分隔线颜色(当前被注释掉)
          // width: 4,          // 分隔线宽度(当前被注释掉)
          type: "dotted", // 分隔线类型:点线
        },
      },
    },

    // toolbox: {
    //   right: 10,
    //   feature: {
    //     dataZoom: {
    //       yAxisIndex: "none",
    //     },
    //     restore: {},
    //     saveAsImage: {},
    //   },
    // },
    dataZoom: [
      {
        bottom: "17px",
        start: `${datazoomStart ?? undefined}`,
        end: `${datazoomEnd ?? undefined}`,
        height: isMin.value ? "23" : "30",
      },
      {
        type: "inside",
      },
    ],
    series: {
      name: `${seriesData.value.parameterName || ""}`,
      type: "line",
      data: seriesData.value.parameterValues || [],
      markPoint: {
        data: [
          {
            type: "max",
            name: "最大值",
          },
          {
            type: "min",
            name: "最小值",
          },
        ],
        label: {
          // 自定义标签显示：当布尔类型图表，则显示 true or false
          formatter: function (obj: any) {
            if (params.value.parameterType === "bool") {
              if (obj.value === 0) {
                return "false";
              } else if (obj.value === 1) {
                return "true";
              } else {
                return "";
              }
            } else {
              return obj.value;
            }
          },
        },
      },
      markLine: {
        silent: false,
        // data: [
        //   {
        //     name: "",
        //     yAxis: `${params.value?.upperLimitValue}`,
        //     lineStyle: {
        //       color: "orange",
        //       type: "dashed",
        //       width: 1,
        //     },
        //     label: {
        //       show: true,
        //       position: "end",
        //       formatter: "上限",
        //     },
        //   },
        //   {
        //     name: "",
        //     yAxis: `${params.value?.lowerLimitValue}`,
        //     lineStyle: {
        //       color: "red",
        //       type: "dashed",
        //       width: 1,
        //     },
        //     label: {
        //       show: true,
        //       position: "end",
        //       formatter: "下限",
        //     },
        //   },
        // ],
        data: getParamAlarmLines(),
        // symbol: "none",
      },
    },
  };
}

onMounted(() => {
  // getInfo();
});
</script>

<style lang="scss" scoped>
.echarts {
  width: 100%;
  height: 420px;
  float: left;
  // box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.echarts:nth-last-child(1) {
  border-bottom: none !important;
}
</style>
